<template>
  <div class="app-container">
        <!--资源管理-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" v-if="$store.state.currentJur.isAdd">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
          <!--<el-col :span="1.5" v-if="$store.state.currentJur.isEdit">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate(selectionDatas)"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5" v-if="$store.state.currentJur.isDel">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>-->
        </el-row>

        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="姓名" align="center" key="Name" prop="Name"  />
          <el-table-column label="分配用户" align="center" key="UserName" prop="UserName"  />
          <!--<el-table-column label="手机号" align="center" key="Phone" prop="Phone" />
          <el-table-column label="微信号" align="center" key="WeChat" prop="WeChat"  />-->
          <el-table-column label="创建时间" align="center" key="CreatedAt" prop="CreatedAt"  />
          <el-table-column label="备注" align="center" key="Notes" prop="Notes"  />
          <el-table-column
            label="操作"
            align="center"
            width="220"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button v-if="$store.state.currentJur.isResource"
                size="mini"
                type="text"
                icon="el-icon-s-unfold"
                @click="handleEditResoce(scope.row)"
              >抢夺资源</el-button>
              <el-button v-if="$store.state.currentJur.isEdit"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >编辑</el-button>
              <!-- <el-button v-if="$store.state.currentJur.isDel"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button> -->

              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-if="$store.state.currentJur.isLook || $store.state.currentJur.isDel">
                <span class="el-dropdown-link">
                  <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                </span>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item command="handleDetail" icon="el-icon-thumb" v-if="$store.state.currentJur.isLook"
                    >查看</el-dropdown-item>
                    <el-dropdown-item command="handleDelete" icon="el-icon-delete" v-if="$store.state.currentJur.isDel"
                      >删除</el-dropdown-item>
                </el-dropdown-menu>
                <el-dropdown-menu slot="dropdown">

                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
         <!-- 添加或修改用户配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="shone">
                    <el-input v-model="form.shone" placeholder="请输入手机号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="微信号" prop="wechat_id">
                        <el-input v-model="form.wechat_id" placeholder="请输入微信号" />
                    </el-form-item>
                </el-col>
                 <el-col :span="24">
                    <el-form-item label="备注" prop="notes">
                        <el-input type="textarea" v-model="form.notes" placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog title="详情" :visible.sync="detailOpen" width="600px" append-to-body>
        <el-form ref="form" :model="detailForm" :rules="detailRules" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="username">
                    <el-input v-model="detailForm.username" placeholder="请输入名称" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="shone">
                    <el-input v-model="detailForm.shone" placeholder="请输入手机号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证" prop="card_id">
                    <el-input v-model="detailForm.card_id" placeholder="请输入身份证" @change="idChange"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="detailForm.sex" placeholder="请选择性别">
                        <el-option key="1" label="男" value="男"></el-option>
                        <el-option key="2" label="女" value="女"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                    <el-input v-model="detailForm.age" placeholder="请输入年龄" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="籍贯" prop="origin">
                    <el-input v-model="detailForm.origin" placeholder="请输入籍贯" disabled maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="民族" prop="family_name">
                    <el-input v-model="detailForm.family_name" placeholder="请输入民族" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身高" prop="stature">
                    <el-input v-model="detailForm.stature" placeholder="请输入身高" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="体重" prop="weight">
                    <el-input v-model="detailForm.weight" placeholder="请输入体重" maxlength="30" />
                    </el-form-item>
                </el-col>




                <el-col :span="12">
                    <el-form-item label="岗位信息" prop="position">
                      <!--<el-select v-model="form.position" placeholder="请选择岗位信息">
                        <el-option
                        v-for="item in positionOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>-->
                    <el-input v-model="detailForm.position" placeholder="请输入岗位信息" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职项目" prop="EntryProgram">
                    <el-input v-model="detailForm.EntryProgram" placeholder="请输入入职项目" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="来源" prop="source">
                    <el-input v-model="detailForm.source" placeholder="请输入来源" maxlength="30" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属单位">
                    <el-select v-model="detailForm.company_id" placeholder="请选择单位">
                        <el-option
                            v-for="item in companyOptions"
                            :key="item.ID"
                            :label="item.Name"
                            :value="item.ID"
                          ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="报到时间" prop="teport_time">
                    <el-date-picker clearable size="small"  style="width: 100%;"
                      v-model="detailForm.teport_time"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="请选择报到时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="疫苗" prop="vaccinum">
                      <el-input v-model="detailForm.vaccinum" placeholder="请输入疫苗" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                    <el-input v-model="detailForm.notes" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
              <el-col><el-divider content-position="left">跟踪信息</el-divider></el-col>
              <el-col>
                <el-descriptions class="margin-top"  :column="4" size="mini" border>
                    <el-descriptions-item v-for="(item,index) in JobsTrackss" :key="index">
                      <template slot="label">
                        <!-- <i class="el-icon-user"></i>-->
                        <!--{{index + 1}}-->
                        {{parseTime(item.CreateTime,'{y}-{m}-{d} {h}:{i}')}}
                      </template>
                      {{item.TakeNotes}}
                    </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col><el-divider content-position="left">修改信息</el-divider></el-col>
              <el-col>
                <el-descriptions class="margin-top"  :column="3" size="mini" border>
                    <el-descriptions-item v-for="(item,index) in JobsRecords" :key="index">
                      <template slot="label">
                        <!-- <i class="el-icon-user"></i>-->
                        {{index + 1}}
                      </template>
                      {{item.Logs}}
                    </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="detailOpen=false">关 闭</el-button>
        </div>
        </el-dialog>
</div>
</template>
<script>
    export default {
        name: 'dept_manage',
        data() {
            return {
                // 查询参数
                queryParams: {
                    page: 1,
                    pageSize: 10,
                },
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],names:[],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                selectionDatas: [],
                dateRange: [],
                //  表单参数
                form: {},
                // 总条数
                total: 10,
                // 用户表格数据
                tableData: [],
                // 弹出层标题
                title: "",
                open: false,detailOpen:false,detailForm:{},detailRules:{},JobsTrackss:[],JobsRecords:[],
                 // 表单校验
                companyOptions:[],
                rules: {
                    name: [
                    { required: true, message: "姓名不能为空", trigger: "blur" },
                    ],
                    shone: [
                        { required: true, message: "手机号不能为空", trigger: "blur" },
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ],
                    wechat_id: [
                    { required: true, message: "微信号不能为空", trigger: "blur" },
                    ],
                },
            }
        },
        created() {
            this.getList();
        },
        methods: {
            handleQuery() {
                this.queryParams.page = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            getList() {
                const this_ = this
                this_.$http.get(this_.GLOBAL.REQUESTURL + "/api/resource",{
                    page: this_.queryParams.page,
                    pageSize: this_.queryParams.pageSize,
                })
                .then(res => {
                    this_.tableData = res.data.resources; //给查询列表赋值
                    this_.total = res.data.total;
                    this_.loading = false;
                })
                .catch(function(err) {
                    this_.tableData = [];
                    this_.total = 0;
                    this_.loading = false;
                });

            },
            handleAdd() {
                this.reset();
                this.title = "添加信息";
                this.open = true;
            },
             /** 修改按钮操作 */
            handleUpdate(row) {
                const that = this;
                this.reset();
                this.open = true;
                this.title = "修改信息";
                this.form.editId = row.ID || this.ids;
                console.log(row)
                this.form.name = row.Name;
                this.form.shone = row.Phone;
                this.form.wechat_id = row.WeChat;
                this.form.notes = row.Notes;
            },
            //  根据身份证获取信息
            idChange(val) {
              const self__ = this;
              console.log(val)
              this.$http.get(this.GLOBAL.REQUESTURL + "/api/checkCardId?cardId="+val)
                .then(res => {
                    console.log(res)
                    if(res.code==200){
                      const Data = res.data;
                      self__.form.age = Data.Age;
                      self__.form.sex = Data.Sex;
                      self__.form.origin = Data.Origin;
                      self__.isDisabled = true;
                    } else {
                      self__.form.age = '';
                      self__.form.sex = '';
                      self__.form.origin = '';
                      self__.isDisabled = false;
                    }
                }).catch(err=>{
                  console.log(err)
                  self__.form.age = '';
                  self__.form.sex = '';
                  self__.form.origin = '';
                  self__.isDisabled = false;
                })
            },
            //查看
            handleDetail(row) {
              const that = this;
              that.detailOpen=true
              const JobsId = row.JobsId;
              that.$http.get(that.GLOBAL.REQUESTURL + "/api/jobs/"+JobsId)
              .then(res => {
                console.log(res)
                that.detailForm.username= res.data.Username;
                that.detailForm.shone= res.data.Shone;
                that.detailForm.card_id= res.data.CardID;
                that.detailForm.sex= res.data.Sex;
                that.detailForm.age= res.data.Age;
                that.detailForm.origin= res.data.Origin;
                that.detailForm.family_name= res.data.FamilyName;
                that.detailForm.stature=res.data.Stature;
                that.detailForm.weight= res.data.Weight;
                that.detailForm.position= res.data.Position;
                that.detailForm.EntryProgram = res.data.EntryProgram;
                that.detailForm.source = res.data.Source;
                that.detailForm.company_id = res.data.CompanyID;
                that.detailForm.teport_time= that.parseTime(res.data.TeportTime);
                that.detailForm.vaccinum = res.data.Vaccinum;
                that.detailForm.notes= res.data.Notes;
                that.JobsTrackss = res.data.JobsTrackss;
                that.JobsRecords = res.data.JobsRecords;
              })
              .catch(function(err) {

                  that.loading = false;
              });

            },
            handleDelete(row) {
                const _self = this;
                const delIds = row.ID || this.ids;
                const names = row.Name || this.names;
                this.$modal.confirm('确认要删除"' + names + '"吗？').then(function() {
                   _self.$http.deleteFn(_self.GLOBAL.REQUESTURL+"/api/resource/"+delIds).then(res=>{
                        _self.$modal.msgSuccess( "删除成功");
                        _self.queryParams.page = 1;
                        _self.getList();
                    }).catch(function() {
                        // _self.$modal.msgWarning( "删除失败");
                    });
                }).catch(function() {
                    // _self.$modal.msgWarning( "删除失败");
                });
            },
            submitForm: function() {
                const _this = this
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.editId != undefined) {
                            _this.$http.put(_this.GLOBAL.REQUESTURL+"/api/resource/"+_this.form.editId,_this.form)
                            .then(res => {
                                if(res.code==200){
                                    _this.$modal.msgSuccess(res.msg);
                                } else {
                                    _this.$modal.msgWarning(res.msg);
                                }
                                _this.open = false;
                                _this.getList();
                            })

                        } else {
                            _this.$http.post(_this.GLOBAL.REQUESTURL+"/api/resource",_this.form)
                            .then(res => {
                                if(res.code==200){
                                    _this.$modal.msgSuccess(res.msg);
                                } else {
                                    _this.$modal.msgWarning(res.msg);
                                }
                                _this.open = false;
                                _this.getList();
                            }).catch(err=> {
                                // _this.$modal.msgError('新增失败!');
                            })
                        }
                    }
                })
            },
             // 更多操作触发
            handleCommand(command, row) {
              switch (command) {
                case "handleDetail":
                  this.handleDetail(row);
                  break;
                case "handleDelete":
                  this.handleDelete(row);
                  break;
                case "handleEditResoce":
                  this.handleEditResoce(row);
                  break;
                default:
                  break;
              }
            },
            handleEditResoce(row) {
              this.$http.get(this.GLOBAL.REQUESTURL + "/api/resource/"+ row.ID)
              .then(res=>{
                console.log(res)
                if(res.code == 0) {
                    this.$modal.msgSuccess("抢夺成功！");
                } else {
                    this.$modal.msgSuccess("抢夺失败！");
                };
              }).catch(err=>{

              })
            //   this.$modal.msgSuccess("修改成功，新密码是：" + value);

            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.ID);
                this.names = selection.map(item => item.Name);

                this.single = selection.length != 1;
                this.multiple = !selection.length;
                console.log(selection)
                this.selectionDatas = selection[0];
            },
             // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
             // 表单重置
            reset() {
                this.form = {
                    editId: undefined,
                    name: undefined,
                    shone: undefined,
                    wechat_id: undefined,
                    notes: undefined,
                };
                this.resetForm("form");
            },
        }
    }
</script>
